<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tooltip</title>
</head>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(125deg, pink, yellow, pink);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.div {
    width: 10%;
    display: inline-block;
    text-align: center;
    line-height: 100px;
    /*position: relative;*/
    margin: 108px 301px;
    cursor: pointer;
    border: solid #1296db 2px;
    background-color: #1296db;
    color: #fff;
    border-radius: 10px;
    overflow: scroll;
    direction: rtl;

}
.tooltip-class{
	position: absolute;
	background-color: black;
}
</style>

<body>
    <!-- 分析=设计=实现 -->
    <!-- 显示，隐藏，定位，配置， -->
    <!-- 绝对定位 js创建dom 鼠标事件 mouseenter leave setTimeout clearTimeout -->
    <!-- createElement:创建元素节点并返回创建的节点 -->
    <!-- appendChild: 追加到已有的元素节点上-->
    <!-- over 与enter区别 子元素  out leave同 -->
    <div class="div" id="div1"><div style="width: 200px;height: 500px"></div>我是坐上角的div</div>
    <div class="div" id="div2">我是右上角的div</div>
    <div class="div" id="div3">我是左下角的div</div>
    <div class="div" id="div4">我是右下角的div</div>
</body>
<script>
// el:超链接元素  id:提示框 html:提示框里面html... 
function showTips(el, id, html, width, height) {
    if (document.getElementById(id)) {
        document.getElementById(id).style.display = 'block';

        el.onmouseleave = function() {
            document.getElementById(id).style.display = 'none'
        }
        el.onmouseenter = function() {
            document.getElementById(id).style.display = 'block'
        }
    } else {
        var tooltips;
        tooltips = document.createElement('div');
        tooltips.className = 'tooltip-class';
        tooltips.id = id;
        tooltips.innerHTML = html;
        el.appendChild(tooltips);
        el.onmouseleave = function() {
            document.getElementById(id).style.display = 'none'
        }
        el.onmouseenter = function() {
            document.getElementById(id).style.display = 'block'
        }
    }
}
var div1=document.getElementById('div1');
div1.onmouseenter=function(){
	showTips(this,'d1','woshitipdiv1')
}
var div2=document.getElementById('div2');
div2.onmouseenter=function(){
	showTips(this,'d2','woshitipdiv2')
}
var div3=document.getElementById('div3');
div3.onmouseenter=function(){
	showTips(this,'d3','woshitipdiv3')
}
var div4=document.getElementById('div4');
div4.onmouseenter=function(){
	showTips(this,'d4','woshitipdiv4')
}

// 元素上和左边框的宽度 window下当有挨着的滚动条，会包括滚动条的宽度
 
console.log('clientTop:'+div1.clientTop)
console.log('clientLeft:'+div1.clientLeft)

// 可视区域宽高 有时受滚动条影响
console.log('clientHeight:'+div1.clientHeight)
console.log('clientWidth:'+div1.offsetHeight)

//offsetparent 最近的定位元素 没有就table table-cell
//offset值为当前元素左上角到定位元素左和上的值
console.log('offsetTop:'+div1.offsetTop)
console.log('offsetLeft:'+div1.offsetLeft)
console.log('offsetWidth:'+div1.offsetWidth);
console.log('offsetHeight:'+div1.offsetHeight)
console.log('scrollWidth:'+div1.scrollWidth)
console.log('scrollHeight:'+div1.scrollWidth)
console.log('scrollLeft:'+div1.scrollLeft)
console.log('scrollTop:'+div1.scrollTop)

</script>

</html>